<template>
  <el-container>
    <el-main>

      <h3>查询车辆</h3>
      <el-row>
        <el-form :inline="true" :model="paging">
          <el-form-item label="开始时间">
            <el-date-picker v-model="paging.start"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择开始时间"
                            style="width: 180px;"
                            type="datetime"
                            value-format="timestamp"
                            :clearable="false"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker v-model="paging.end"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择结束时间"
                            style="width: 180px"
                            type="datetime"
                            :clearable="false"
                            value-format="timestamp"
            />
          </el-form-item>
          <el-form-item label="进/出">
            <el-select v-model="paging.condition.type" placeholder="可不选">
              <el-option label="进" value="IN"></el-option>
              <el-option label="出" value="OUT"></el-option>
              <el-option label="进/出" value=""></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="牌照">
            <el-input v-model="paging.condition.plateNo" placeholder="可不填"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pageBarrier();">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="car">
          <el-table-column label="车主" prop="owner"></el-table-column>
          <el-table-column label="车牌" prop="plateNo"></el-table-column>
          <el-table-column label="车辆" prop="carTypeName"></el-table-column>
          <el-table-column label="进出" prop="gateName"></el-table-column>
          <el-table-column label="时间" prop="timestamp.timeString"></el-table-column>
          <el-table-column label="" prop="reason"></el-table-column>
        </el-table>
        <el-pagination
            :current-page.sync="paging.page"
            :page-size.sync="paging.size"
            :total="total"
            background
            layout="prev, pager, next,jumper"
            @current-change="pageBarrier"
            style="padding-top: 20px"
        >
        </el-pagination>
      </el-row>
      <car-pack style="padding-top: 20px"/>
    </el-main>
  </el-container>
</template>

<script>
import {copyObj} from "../../common/utils";
import CarPack from "./carInParking";
import {CarStatus, queryBarrier} from "../../network/parkingLotApi";

export default {
  name: "barrierPage",
  components: {CarPack},
  data() {
    return {
      paging: {
        page: 1,
        size: 10,
        start: new Date().getTime() - 7 * 24 * 60 * 60 * 1000,
        end: new Date().getTime(),
        condition: {
          type: null,
          plateNo: null,
        }
      },
      car: null,
      total: null,
    }
  },
  mounted() {
    this.carStatus();
    this.pageBarrier()
  },
  methods: {
    pageBarrier() {
      let d = copyObj(this.paging);
      console.log(d.start, d.end)
      d.start /= 1000;
      d.end /= 1000;
      queryBarrier(d).then(res => {
        this.car = res.data.records;
        this.total = res.data.total;
        console.log(res);
      })
    },
    page() {
      queryBarrier(this.paging).then(res => {
        console.log(res)
      })
    },
    carStatus() {
      let day = 7;
      CarStatus(day).then(res => {
        console.log(res)
      })
    },
  },
}
</script>

<style scoped>

</style>